<template>
<div class="tuijian">
	
  	<div class="m-homeremd">
  		<h2 class="remd_tl">推荐歌单</h2>
  	</div>
  	<div class="songs" >
  		<div class="remd_ul" >
  			
  			<div class="remd_li" v-for="(item,index) in list" v-if="index<6" @click="jump(item.id)">
  			
  				<div class="remd_img">
  					<img  v-lazy="item.picUrl" alt="" class="u-img"  />
  					<div class="u-earp"><earpod class="earpod"></earpod><span>{{playNum(item.playCount)}}万</span></div>
  					<i class="remd_high" v-if="item.highQuality"><huanggaun></huanggaun></i>
  				</div>
  				<p class="remd_text">
  					{{item.name}}
  				</p>
  			</div>
  			
  			<div class="clearfix"></div>
  			
  		</div>
  	</div>
  	
  	
  	
  </div>
</template>

<script>
	import huanggaun from '@/svg/huanggaun.svg'
	import earpod from '@/svg/earpod.svg'
	import axios from 'axios'
	import api from '@/api'
	
	
	export default {
		name:'tuijian',
		data(){
			return {
				list:"",
				play:0
			}
		},
		components:{
			huanggaun,
			earpod
		},
		methods:{
			playNum(num){
				return (num/10000).toFixed(1);
			},
			jump(id){
				this.$router.push({
					path:'/playList',
					query:{id}
				});
				this.$store.commit('hiddentHead',{
					hiddentHead:true
				})
			}
		},
		mounted(){
			axios.get(api.personalized).then((res)=>{
				
				this.list=res.data.result;
//				console.log(this.list)
			})
			.catch((e)=>{
				
			})
		}
	}
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';
	

.tuijian{
	margin-top: r(208px);
}
.m-homeremd{
	padding-top: r(40px);
	.remd_tl{
		text-align: left;
		position: relative;
	    padding-left: r(18px);
	    /*margin-bottom: r(28px);*/
	    font-size: r(34px);
	    height: r(40px);
	    line-height: r(40px);
    &::after{
    	content: " ";
	    position: absolute;
	    left: 0;
	    top: 50%;
	    margin-top: r(-18px);
	    width: r(4px);
	    height: r(32px);
	    background-color: #d33a31;
    }
	}
	    
}
.songs{
	position: relative;
    padding-bottom: r(48px);
    width: 100%;
    font-size: 0;
}
.remd_ul{
	height:r(500px) 
    &::after{
    		display: block;
		    visibility: hidden;
		    clear: both;
		    height: 0;
		    overflow: hidden;
		    content: ".";
		   /*content: "";
		   display: block;
		   clear: both;
		   width: 100%;*/
		   
    	}
    	
    }

    
    
    .remd_li{
    	height: r(281px);
    		margin-top: r(32px);
    		display: block;
		    float: left;
		    width: 33.3%;
		    padding-left: r(2px);
		    padding-right: r(2px);
		    box-sizing: border-box;
		    &:nth-of-child(3n){
		    	padding-left: r(2px);
    			padding-right: 0;
		    }
    	}
.remd_img{
	position: relative;
    padding-bottom: 100%;
    .u-img{
    	position: absolute;
	    width: 100%;
	    left: 0;
	    top: 0;
	    z-index: 1;
	    vertical-align: middle;
    }
    .u-earp{
    	font-size: 0;
    	position: absolute;
	    right: r(10px);
	    top: r(4px);
	    z-index: 3;
	    padding-left: r(26px);
	    color: #fff;
	    
	    background-position: 0;
	    background-repeat: no-repeat;
	    background-size: r(22px) r(20px);
	    text-shadow: r(2px) 0 0 rgba(0,0,0,.15);
	    span{
	    	font-size: r(24px);
	    }
	    .earpod{
	    	width: r(22px);
	    	padding-right: r(4px);
	    }
    }
    .remd_high{
    	font-size: 0;
    	position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 5;
	    width: r(40px);
	    height: r(40px);
	    /*background: url(../svg/huanggaun.svg) 0 no-repeat;*/
	    background-size: contain;
    }
    	
}
.remd_text{
	text-align: left;
    	display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    padding: r(12px) r(4px) 0 r(12px);
	    line-height: 1.2;
	    font-size: r(26px);
    }
</style>